<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'customized_data.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<script src='<%=basePath %>/dwr/interface/SystemService.js'></script>
	<script src='<%=basePath %>/dwr/engine.js'></script>
	<script type="text/javascript" src="<%=basePath%>/js/jquery.js"></script>
	<script type="text/javascript" src='<%=basePath %>/js/jquery.blockUI.js'></script>
	<script type="text/javascript" src='<%=basePath %>/admin/datasource/js/customized.js'></script>
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<style type="text/css">
		body { 
	    font: normal 12px auto "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; 
	    color: #4f6b72; 
	    background: #EEF2FB; 
	} 
	.select_ds{
		margin-left:10px;
		border: 1px solid #fff;
		width: 400px;
		height: 500px;
	}
	.table1{
		 margin: 10px;
		 font: normal 15px auto "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; 
		 margin-left: auto;
		 margin-right: auto;
		
		 border-collapse: collapse;
		 width: 700px;
	}
	
	.mybutton {
		background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #e0e0e0), color-stop(1, #a199a1) );
		background:-moz-linear-gradient( center top, #e0e0e0 5%, #a199a1 100% );
		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e0e0e0', endColorstr='#a199a1');
		background-color:#e0e0e0;
		-moz-border-radius:13px;
		-webkit-border-radius:13px;
		border-radius:13px;
		border:1px solid #dcdcdc;
		display:inline-block;
		color:#666666;
		font-family:arial;
		font-size:15px;
		font-weight:bold;
		padding:6px 24px;
		text-decoration:none;
		text-shadow:1px 1px 12px #ffffff;
	}
	.mybutton:hover {
		background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #a199a1), color-stop(1, #e0e0e0) );
		background:-moz-linear-gradient( center top, #a199a1 5%, #e0e0e0 100% );
		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#a199a1', endColorstr='#e0e0e0');
		background-color:#a199a1;
	}
	.mybutton:active {
		position:relative;
		top:1px;
	}
	
	.tbtn {
		-moz-box-shadow:inset 0px 1px 0px 0px #bbdaf7;
		-webkit-box-shadow:inset 0px 1px 0px 0px #bbdaf7;
		box-shadow:inset 0px 1px 0px 0px #bbdaf7;
		background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #86b0db) );
		background:-moz-linear-gradient( center top, #79bbff 5%, #86b0db 100% );
		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#86b0db');
		background-color:#79bbff;
		-moz-border-radius:6px;
		-webkit-border-radius:6px;
		border-radius:6px;
		border:1px solid #5ea5eb;
		display:inline-block;
		color:#ffffff;
		font-family:arial;
		font-size:15px;
		font-weight:bold;
		padding:6px 24px;
		text-decoration:none;
		text-shadow:1px 1px 0px #528ecc;
	}
	.tbtn:hover {
		background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #86b0db), color-stop(1, #79bbff) );
		background:-moz-linear-gradient( center top, #86b0db 5%, #79bbff 100% );
		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#86b0db', endColorstr='#79bbff');
		background-color:#86b0db;
	}
	.tbtn:active {
		position:relative;
		top:1px;
	}
	

	</style>
	
	<script type="text/javascript">
		$(function(){
			showBlock("body");
			getSystemTables();
			SystemService.getDataSources(function(data) {
				if(data) {
					var ds = $("#datasources") ;
					for(var i=0;i<data.length;i++) {
						var cur = data[i] ;
						ds.append("<option value='"+cur.id+"'>"+cur.id+"</option>");
					}
				}
				$("body").unblock();
			});
		}) ;
		
	
	</script>

  </head>
  
  <body>
    <h3 style="margin-top: 10px;text-align: center;">定制数据需求</h3>
    <hr>
   	<table class="table1" border="0" id="table1" >
   		<tr>
   			<td align="right">请选择数据源：
   			<select style="width: 200px" onchange="getTables()" id="datasources">
   				<option value="-1">----------------请选择---------------</option>
    		</select>
    		</td>
   			<td>请选择数据表：
   				<select style="width: 200px" id="ds_table" onchange="getFields();" >
   					<option value="-1">----------------请选择---------------</option>
    			</select>
   			</td>
   		</tr>
   		<tr>
   				<td colspan="2" style="text-align: center;">
    				<span>字段信息</span>
    				<div style="border: solid 1px #fff;width:100%;height: 180px;overflow: auto;text-align: center;">
    					<table align="center" style="text-align: center;" class="fieldTable" id="fieldTable">
    						<tr>
    							<td width="20px;"></td>
    							<td width="100px auto;">字段名称</td>
    							<td width="100px auto;">数据类型</td>
    						</tr>
    						<tbody id="aa">
    						</tbody>
    					</table>
    				</div>
    			</td>
   		</tr>
   		
   		<tr>
   			<td colspan="2" style="text-align: center;">
   				<div style="width:100%;height:60px;">
   					<div style="height: 80px;width: 90px;float: left;text-align: center;">
   						<span class="myspan" style="margin-top: auto;margin-bottom: auto;">已选择字段：</span>
   					</div>
   					<div style="width:600;height:80px;float: right;text-align: left;overflow: auto;" id="select_field">
   					</div>
   				</div>
   			</td>
   		</tr>
   		<tr>
   			<td align="right">请选择系统表：
   			<select style="width: 200px" id="sys-tab" onchange="getSystemColumns();">
    					<option value="-1">----------------请选择---------------</option>
    		</select>
    		</td>
   			<td>请选择关联字段：
   				<select style="width: 200px" id="sys-column">
    					<option value="-1">----------------请选择---------------</option>
    			</select>
   			</td>
   		</tr>
   		<tr>
   			<td align="right">
   				<a href="javascript:go_on_customized()" class="tbtn" style="margin-right: 10px;margin-top: 10px;">继续定制</a>
    		</td>
   			<td>
   				<a href="javascript:submit_customized()" class="tbtn" style="margin-left: 10px;margin-top: 10px;">提交定制</a>
   			</td>
   		</tr>
   	</table>
  </body>
</html>
